<template>
  <div class="bigBox">
    <div class="leftNavBox">
      <aside id="colorlib-aside" role="complementary" class="js-fullheight">
        <nav id="colorlib-main-menu" role="navigation">
          <ul>
            <li @click="goPage('首页','homeIndex')" :class="{ 'colorlib-active': activeName == '首页' }"><a href="javascript:void 0">首页</a></li>
            <li @click="goPage('文章','homeBook')" :class="{ 'colorlib-active': activeName  == '文章'}"><a href="javascript:void 0">文章</a></li>
            <li @click="goPage('软件')" :class="{ 'colorlib-active': activeName == '软件'}"><a href="javascript:void 0">软件</a>
            </li>
            <li @click="goPage('About')" :class="{ 'colorlib-active': activeName == 'About'}"><a href="javascript:void 0">About</a>
            </li>
            <li @click="goPage('Contact')" :class="{ 'colorlib-active': activeName  == 'Contact'}"><a href="javascript:void 0">Contact</a>
            </li>
          </ul>
        </nav>

        <div class="colorlib-footer">
          <h1 id="colorlib-logo" class="mb-4"><a href="index.html" class="bg">Andrea <span>Moore</span></a></h1>
          <div class="mb-4">
            <h3>Subscribe for newsletter</h3>
          </div>
        </div>
      </aside> <!-- END COLORLIB-ASIDE -->
    </div>
    <div class="rightBox">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script>
import { ref, h } from "vue"
import { RouterView } from "vue-router";
export default {
  data() {
    return {
      activeName: "文章"
    }
  },
  methods: {
    goPage(name,path) {
      this.activeName = name
      this.$router.push({path,path})
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
@import url("./css/style.css");

* {
  margin: 0px;
  padding: 0px;
}
.bigBox {
  display: flex;
  flex-direction: row;
  height: 98%;
  background-color: #e6e9eb0e;
}

.leftNavBox {
  width: 300px;
  height: 100%;
}

.rightBox {
  margin: 5px 50px;
  width: 100% !important;
  padding-left: 1em;
}

.bg {
  background-image: url("./images/bg_1.jpg");
}

@media (max-width: 1300px) {
  .leftNavBox {
    width: 200px;
    height: 100%;
  }

  .rightBox {
    margin: 5px 10px;
  }
}

@media (max-width: 1284px) {
  .leftNavBox {
    width: 190px;
    height: 100%;
  }

  .rightBox {
    /* margin: 5px 30px; */
    margin-right: 30px;
  }
}

@media (max-width: 992px) {
  .leftNavBox {
    width: 150px;
    height: 100%;
  }

  .rightBox {
    /* margin: 5px 20px; */
    margin-right: 20px;
  }
}
@media (max-width: 600px) {
  .colorlib-footer {
    display: none;
  }
}
</style>